<template>
  <el-card class="user-device-card-info" :style="{ height: height }">
    <template #header>
      <div class="flex justify-between">
        <div>设备详情</div>
        <div>
          <el-button
            :disabled="loading"
            circle
            :icon="Refresh"
            size="small"
            @click="fetchData(true)"
          />
        </div>
      </div>
    </template>
    <el-form v-loading="loading" label-width="auto" size="small">
      <el-form-item label="设备图">
        <el-image :src="userDevice?.device_image" alt="设备图片" class="w-20 h-20" />
      </el-form-item>

      <el-form-item label="设备号">
        <el-input :value="userDevice?.device_sn" readonly />
      </el-form-item>

      <el-form-item label="在线状态">
        <el-tag v-if="userDevice?.online_status === 1" type="success">在线</el-tag>
        <el-tag v-if="userDevice?.online_status === 0" type="danger">离线</el-tag>
      </el-form-item>

      <el-form-item label="设备名称">
        <el-input :value="userDevice?.device_name" readonly />
      </el-form-item>

      <!-- 跌倒报警器 -->
      <UserDeviceAlaemFallBtns
        v-if="userDevice?.device_model == DeviceModelEnums.ALAEM_FALL"
        :sn="userDevice?.device_sn"
      />

      <!-- SOS报警器 -->
      <UserDeviceAlaemSosBtns
        v-if="userDevice?.device_model == DeviceModelEnums.ALAEM_SOS"
        :sn="userDevice?.device_sn"
      />

      <!-- 烟雾报警器 -->
      <UserDeviceAlaemSmokeBtns
        v-if="userDevice?.device_model == DeviceModelEnums.ALAEM_SMOKE"
        :sn="userDevice?.device_sn"
      />

      <el-form-item label="激活时间">
        <el-input :value="userDevice?.activate_time" readonly />
      </el-form-item>

      <el-form-item label="上线时间">
        <el-input :value="userDevice?.online_time" readonly />
      </el-form-item>

      <el-form-item label="离线时间">
        <el-input :value="userDevice?.offline_time" readonly />
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script setup lang="ts">
import DeviceAPI from "@/api/device";
import { DeviceModelEnums } from "@/enums/DeviceModelEnums";
import { UserDeviceModel } from "@/model/user-device-model";
import { Refresh } from "@element-plus/icons-vue";
import UserDeviceAlaemFallBtns from "./UserDeviceAlaemFallBtns.vue";
import UserDeviceAlaemSosBtns from "./UserDeviceAlaemSosBtns.vue";
import UserDeviceAlaemSmokeBtns from "./UserDeviceAlaemSmokeBtns.vue";

defineOptions({
  name: "UserDeviceCardInfo",
});

const userDevice = ref<UserDeviceModel>();
const loading = ref(false);
const pollInterval = ref<number | null>(null); // 用于存储 setInterval 的 ID

const props = defineProps({
  sn: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "auto",
  },
});

onMounted(() => {
  fetchData(true);
});

onUnmounted(() => {});

/**
 * @description 获取数据
 */
function fetchData(showLoading = false) {
  if (showLoading) {
    loading.value = true;
  }
  DeviceAPI.userDeviceDetail(props.sn)
    .then((res) => (userDevice.value = res))
    .finally(() => (loading.value = false));
}

/**
 * @description 启动轮询
 */
function startPolling(interval: number = 5000) {
  if (pollInterval.value === null) {
    pollInterval.value = window.setInterval(fetchData, interval); // 每隔 interval 毫秒调用一次 fetchData
  }
}

/**
 * @description 停止轮询
 */
function stopPolling() {
  if (pollInterval.value !== null) {
    clearInterval(pollInterval.value);
    pollInterval.value = null;
  }
}
</script>

<style lang="scss" scoped>
.user-device-card-info {
  overflow-y: scroll;

  &::-webkit-scrollbar {
    width: 0;
  }
}
</style>
